<template>
  <div id="studentInfo">
    <el-dialog
      title="新增收货地址"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form :model="formData" :rules="rules" ref="formData">
        <el-form-item
          label="联系人"
          :label-width="formLabelWidth"
          prop="contact"
        >
          <el-input v-model="formData.contact"></el-input>
        </el-form-item>
        <el-form-item
          label="手机号码"
          :label-width="formLabelWidth"
          prop="telephone"
        >
          <el-input v-model="formData.telephone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="收货地址"
          :label-width="formLabelWidth"
          prop="address"
        >
          <el-input v-model="formData.address" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="onCancel('formData')">取 消</el-button>
        <el-button type="primary" @click="onConfirm('formData')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <div class="userTop">
      <div class="search">
        <label class="searchNameText">联系人</label>
        <el-input
          placeholder="请输入内容"
          v-model="pageBeanData.contact"
          @input="findUserByuserName()"
        >
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
        <label class="searchNameText">地址</label>
        <el-input
          placeholder="请输入内容"
          v-model="pageBeanData.address"
          @input="findUserByuserName()"
        >
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
      </div>
      <div class="userOperation">
        <el-button
          type="success"
          icon="el-icon-circle-plus"
          @click="addAddressPage"
        >
          新增收货地址</el-button
        >
      </div>
    </div>
    <div class="content">
      <el-table
        :data="tableData"
        highlight-current-row
        @select-all="selectAll()"
        @select="select"
      >
        <el-table-column align="center" type="selection"></el-table-column>
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column label="联系人" align="center">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.contact }}</span>
          </template>
        </el-table-column>
        <el-table-column label="手机号码" align="center">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.telephone }}</span>
          </template>
        </el-table-column>

        <el-table-column label="默认地址" align="center">
          <template slot-scope="scope">
            <el-switch
              @change="isdefaultAddressChange(scope.$index, scope.row)"
              :value="scope.row.isdefault == '1'"
              active-color="#13ce66"
              inactive-color="#fff"
              active-text="是"
              inactive-text="否"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="地址" align="center">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.address }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageBeanData.current"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageBeanData.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageBeanData.count"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      self: this,
      nameSearch: {
        username: "",
        address: "",
      }, //首页根据姓名搜索
      value: "",
      tableData: [],
      pageBeanData: {
        size: 10,
        total: 10,
        current: 1,
        count: 0,
        address: "",
        contact: "",
        uid: localStorage.getItem("uid"),
      },
      formData: {
        address: "",
        contact: "",
        telephone: "",
        uid: localStorage.getItem("uid"),
      },

      formLabelWidth: "120px",
      dialogFormVisible: false,
      rules: {
        address: [{ required: true, message: "请输入地址", trigger: "blur" }],
        contact: [{ required: true, message: "请输入联系人", trigger: "blur" }],
        telephone: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    this.initTableData();
  },
  methods: {
    initTableData() {
      let _this = this;
      this.$axios({
        method: "post",
        url: _this.$apiServer.getMyAddress,
        params: this.pageBeanData,
      }).then(function (res) {
        console.log(res.data.data);
        _this.tableData = res.data.data;
        _this.pageBeanData.count = res.data.count;
        _this.pageBeanData.current = res.data.current;
        _this.pageBeanData.size = res.data.size;
        _this.pageBeanData.total = res.data.total;
      });
    },
    addAddressPage() {
      this.formData.address = "";
      this.formData.telephone = "";
      this.formData.contact = "";
      this.dialogFormVisible = true;
    },
    handleEdit(index, row) {
      console.log(index, row);
      Object.assign(this.formData, row);
      this.dialogFormVisible = true;
    },
    handleDelete(index, row) {
      let _this = this;
      console.log(index, row);
      // let ids = [];
      // ids.push(row.id);
      // let data = ids.toString();
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          _this
            .$axios({
              method: "post",
              url: _this.$apiServer.deleteAddress,
              params: {
                aid: row.aid,
              },
            })
            .then((res) => {
              console.log(res.data);
              _this.$message({
                type: "success",
                message: res.data.msg,
              });
              _this.initTableData();
            });
        })
        .catch(() => {
          _this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    selectAll() {
      console.log("全选");
    },
    select() {
      console.log("勾选了");
    },
    findUserByuserName() {
      console.log(this.pageBeanData);
      this.initTableData();
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageBeanData.size = val;
      this.initTableData();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageBeanData.current = val;
      this.initTableData();
    },
    isdefaultAddressChange(index, row) {
      let _this = this;
      console.log(row);
      this.$axios({
        method: "post",
        url: _this.$apiServer.updateDefultAddress,
        params: {
          uid:row.uid,
          aid:row.aid
        },
      }).then(function (res) {
          if(res.data.code=="200"){
                _this.$message({
                type: "success",
                message: res.data.msg,
              });
                _this.initTableData();
          }else{
                _this.$message({
                type: "error",
                message: res.data.msg,
              });
          }
      });
    },
    onConfirm() {
      let _this = this;
      this.$refs[formData].validate((valid) => {
        if (valid) {
          this.$axios({
            method: "post",
            url: _this.$apiServer.addAddress,
            data: this.formData,
          }).then(function (res) {
            if ((res.data.code = "200")) {
              _this.$message({
                type: "success",
                message: res.data.msg,
              });
              _this.dialogFormVisible = false;
              _this.initTableData();
            } else {
              _this.$message({
                type: "error",
                message: res.data.msg,
              });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    onCancel(formName) {
      this.$refs[formName].resetFields();
      this.dialogFormVisible = false;
    },
  },
};
</script>
<style>
@import url("../css/UserHome.css");
</style>